<?php
function cek_profpic($pic){
    if($pic == null){
        echo base_url('img/placeholder.png');
    }else{
        echo base_url('img/profpic/'.$pic);
    }
}
?>

<style>
    .file-wrapper {
                cursor: pointer;
                display: inline-block;
                overflow: hidden;
                position: relative;
            }
            .file-wrapper input {
                cursor: pointer;
                font-size: 100px;
                height: 100%;
                filter: alpha(opacity=1);
                -moz-opacity: 0.01;
                opacity: 0.01;
                position: absolute;
                right: 0;
                top: 0;
            }
</style>

<div class="container">
    <div class="row">
        <div class="span12">
            <div id="alert-area">

            </div>
        </div>
    </div>
    <div class="row">
        <div id="show" class="span12">
            <h1>Setting</h1>
            <table>
                <tr>
                    <td>Profile Picture</td>
                    <td><?php echo form_open_multipart('login/profpicedit');?>
                        <img src="<?php cek_profpic($user->profpic); ?>" class="img-polaroid span1"/>
                        <span class="file-wrapper">
                            <br />&nbsp;&nbsp;&nbsp;
                            <input type="file" name="photo" id="photo" />
                            <span><a href="#" class="btn"><i class="icon-camera"></i></a></span>
                            <span class="file-holder"></span>
                        </span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <?php echo form_submit('submit', 'Save Picture', 'class="btn btn-primary" id="savepic"'); ?>
                        <?php echo form_close(); ?>
                    </td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td><span style="padding-left: 20px; text-transform: capitalize;"><?php echo $user->nama; ?></span></td>
                </tr>
            </table>
            <br />
            <button type="button" class="btn btn-primary" data-toggle="button" id="change">Change Password</button>
            <br /><br />
            <div class="gantipassword">
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Old Password</label>
                    <div class="controls">
                        <input type="password" id="oldpass" placeholder="Old Password">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword">New Password</label>
                    <div class="controls">
                        <input type="password" id="newpass" placeholder="Password">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <button type="submit" class="btn btn-primary" id="editpass">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="<?php echo base_url(); ?>js/file_input.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.gantipassword').hide();
    });
    
    $('#change').click(function(){
        $('.gantipassword').slideToggle();
    });
    
    $('#editpass').click(function(){
        oldpass = $('#oldpass').val();
        newpass = $('#newpass').val();
        if(oldpass == '' || newpass == ''){
            alert('Please fill the old and new password');
        }else{
            $.post("<?php echo site_url('login/editpass'); ?>", { oldone : oldpass, newone : newpass }, function(data){
                if(data == 1){
                    $('.gantipassword').hide();
                    alert('Password has been changed');
                }else{
                    alert('Error has occured, please try again');
                }
            });
        }
    });
</script>